<template>
  <div style="padding:30px;">
    <!-- <el-alert :closable="false">
      <router-view />
    </el-alert>-->
    <div class="block" style="margin-bottom:20px">
      <!-- <span class="demonstration">请选择级别:</span> -->

      <el-select v-if="qx.level>3" @change="slfgs" v-model="uid" placeholder="请选择分公司">
        <el-option label="全部" :value="-1"></el-option>
        <el-option v-for="item in coms" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <el-select v-if="qx.level>2" @change="slbm" v-model="bid" placeholder="请选择部门">
        <el-option label="全部" :value="-1"></el-option>
        <el-option v-for="item in coms1" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="status" @change="changeStatus" placeholder="请选择执行状态">
        <el-option label="全部" :value="-1"></el-option>
        <el-option label="未执行" :value="1"></el-option>
        <el-option label="已执行" :value="2"></el-option>
      </el-select>
      <el-select @change="itemtype" v-model="itemType" placeholder="请选择项目类型">
        <el-option label="全部" :value="-1"></el-option>
        <el-option label="安全评价" :value="1"></el-option>
        <el-option label="职卫评价" :value="2"></el-option>
        <el-option label="安全咨询" :value="3"></el-option>
        <el-option label="安全检查" :value="4"></el-option>
        <el-option label="检测检验" :value="5"></el-option>
      </el-select>
    </div>
    <div class="block" style="margin-bottom:20px;display:flex;justify-content:space-between">
      <div class="demonstration">
        <el-button @click="print" type="primary" size="mini" style="margin:30px auto;">打印</el-button>
        <el-button type="primary" size="mini" style="margin:30px auto;">导入</el-button>
        <!-- <el-button type="primary" size="mini" style="margin:30px auto;">历史数据</el-button> -->
      </div>
      <div class="demonstration;" style="align:right">{{nowdata}}</div>
    </div>
    <el-table ref="print" :data="tableData" border style="width: 100%;align" v-loading="loading">
      <el-table-column align="center" label="项目名称" prop="proName"></el-table-column>
      <el-table-column align="center" label="项目类型" prop="proType"></el-table-column>
      <el-table-column align="center" label="项目负责人" width="120" prop="proPrincipal"></el-table-column>
      <el-table-column align="center" label="合同编号" prop="conNumber"></el-table-column>
      <el-table-column align="center" label="合同文本" prop="conText"></el-table-column>
      <el-table-column align="center" label="项目数量" prop="number"></el-table-column>
      <el-table-column align="center" label="项目单位" prop="proCompany"></el-table-column>
      <el-table-column align="center" label="项目部门" width="180" prop="proDepartment"></el-table-column>
      <el-table-column align="center" label="分公司名称" prop="pro_department"></el-table-column>

      <el-table-column v-if="noprint" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="open(scope.$index, scope.row)">详情</el-button>
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <v-pagination
      style="margin-top:20px"
      @page-change="pageChange"
      @page-size-change="pageSizeChange"
      :total="total"
      :page-size="pageSize"
      :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
    ></v-pagination>
    <el-dialog title="详情" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="ruleForm" class="aaaa">
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.proName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.proType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.proPrincipal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.conNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同文本" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.conText" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目数量" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目单位" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.proCompany" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目部门" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.proDepartment" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="签约日期" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.signTime" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>-->
    </el-dialog>
  </div>
</template>

<!-- 引入组件库 -->

<script>
import { hqfgs } from "@/api/zuzhijiagou";
import { getToken, gettype, getid } from "@/utils/auth";
import request from "@/utils/request";
import { ymd, ym } from "@/api/date";
export default {
  name: "DragTable",

  data() {
    return {
      noprint: true,
      nowdata: ymd(),
      datatime: [],
      loading: true,
      formLabelWidth: "120px",
      dialogFormVisible: false,
      list: null,
      itemType:'',
      status: '',
      pm: {
        cid: "",
        page: 1,
        pageSize: 10
      },
      flag: -1,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      total: 1,
      coms: [],
      coms1: [],
      uid: "",
      bid: "",
      tableData: [],
      ruleForm: "",
      qx: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {
    var id = getid();
    this.pm.cid = id;
    this.selectdown();
    this.getqx();
  },
  methods: {
    itemtype(e){
      console.log(e)
      this.itemType=e;
      this.findList()
    },
    changeStatus(e) {
      console.log(e);
      this.flag = e;
      this.findList();
    },
    findList() {
      var that = this;
      var resdata = {
        cid: this.pm.cid,
        uid: that.uid,
        pid: that.bid,
        page: this.pageIndex,
        pageSize: this.pageSize,
        tokens: getToken(),
        flag: this.flag,
        contracttype:this.itemType
        // startTime: this.datatime[0] == "" ? "" : this.datatime[0],
        // endTime: this.datatime[1] == "" ? "" : this.datatime[1]
      };

      // 模拟后台接口
      this.loading = true;

      request(`/contract/ContractSumm`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: resdata
      }).then(function(response) {
        console.log(response);
        that.tableData = response.data.object;
        console.log(111111);

        that.total = response.data.total;
        that.loading = false;
        // that.$message({
        //   type: "success",
        //   message: "加载成功!"
        // });
      });
    },
    print() {
      this.noprint = false;
      console.log(this.noprint);
      // this.w = this.wp;
      setTimeout(() => {
        this.$print(this.$refs.print);
      }, 500);
      setTimeout(() => {
        this.noprint = true;
        // this.w = this.wf;
      }, 1500);
    },
    selectdown() {
      console.log(this.datatime);
      var that = this;
      var p = {
        tokens: getToken()
      };
      request(`branch/selectdown`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.coms = response.data.object;
            // that.uid = response.data.object[0].id;
            that.findList();
          } else {
            that.fail = true;
            that.failc = response.message;
          }
        })
        .catch(error => {
          console.log(error); //异常
        });
    },
    selectdown1(a) {
      console.log("add");
      var that = this;
      var p = {
        tokens: getToken(),
        bid: a
      };
      request(`department/selectComboBox`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.coms1 = response.data.object;
          } else {
            that.fail = true;
            that.failc = response.message;
          }
        })
        .catch(error => {
          this.loading = false;
          that.fail = true;
          that.failc = response.message;
          console.log(error); //异常
        });
    },
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.findList();
      console.log(pageIndex);
    },
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.findList();
    },
    open(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.ruleForm = row;
    },
    slfgs(selVal) {
      this.uid = selVal;
      this.bid = "";
      console.log(selVal);
      this.findList();
      this.selectdown1(selVal);
      // this.dialogVisible = true;
    },
    slbm(selVal) {
      this.bid = selVal;
      this.findList();
      // this.dialogVisible = true;
    },
    dateChange() {
      this.findList();
    },
    getqx() {
      var that = this;
      var p = {
        tokens: getToken()
      };
      request(`person/rolelist`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.qx = response.data.object;
            console.log(that.qx.level);
            var level = that.qx;

            if (level == 4) {
              that.pm.cid = level.cid;
            } else if (level == 3) {
              that.pm.cid = level.cid;
              that.uid = level.bid;
            } else if (level == 2) {
              that.pm.cid = level.cid;
              that.uid = level.bid;
              that.bid = level.pid;
            }
          } else {
            that.fail = true;
          }
        })
        .catch(error => {
          console.log(error); //异常
        });
    }
  }
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
.el-alert__content {
  width: 100%;
}
.aaaa input {
  disabled: "disabled";
}
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
/* .el-alert__content {
  width: 50%;
} */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-alert__content {
  width: 100%;
}
</style>
